/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
$(document).ready(function(){

    ajax.get('fc?action=getHeader','html',
        function(h){
            var curr =  $('div.header').text().trim();          
            $('div.header').html(h);
            $(curr).addClass('current');
            
            if(curr === '#index'){
                shop.viewProducts();
            }
            else if(curr ==='#viewCart')
                shop.viewCart();
            
            $('#pay').click(function(){
                $(this).addClass('current');
                $(curr).removeClass('current');
                 shop.pay();
            });
       
            shop.checkLogin();
              
            //default
            bundle.getBundle('xml/i18n/en/gui/en.xml');

            
    });
        
    ajax.get('fc?action=getFooter','html',
        function(h){          
            $('div.footer').html(h);
            $('<b class="alignRight">'+new Date().toLocaleString()+'</b>')
            .appendTo($("div.footer"));
     });
    
    
     
 });

var shop = {
    
    viewProducts:function(){
        
        ajax.get('fc?action=viewProducts', 'xml', 
            function(xml){ 
                shop.createTable(xml, 'viewProducts');
            })
    },
    
    removeDropdown:function(){
        $('div.dropdown').remove();
    },
    
    addToCart:function(productId){
        ajax.post('fc?action=addToCart', 'productId='+productId);
    },
    removeFromCart:function(productId){
        ajax.post('fc?action=rmv', 'productId='+productId);
        shop.viewCart();
    },
    
    emptyCart:function(){
        ajax.post('fc?action=emptyCart');
        shop.viewCart();
    },
    viewCart:function(){
        ajax.get('fc?action=viewCart', 'xml', function(xml){          
            shop.createTable(xml, 'viewCart');
        });
    },
    
    pay:function(){
        ajax.get('fc?action=pay', 'xml', function(xml){          
            shop.createTable(xml, 'pay');
        });
    },
    
    checkLogin:function(){
        ajax.get('fc?action=checkLogin', 'text', function(txt){          
            var loginMenu = $('#login').text().trim();
            if(txt === 'false'){
                 if(loginMenu === 'Logout'){
                     $('#login').text('Login');
                     $('#login').attr('href', 'login.xhtml');
                     $('#loginInfo').text(' ');
                    //$('#login').remove();
                    //$('#loginMenu').append('<a href="login.xhtml" id="login"> Login</a>');
                 }
            }
            else{
                 if(loginMenu === 'Login'){
                      $('#login').text('Logout');
                      $('#login').attr('href', 'fc?action=logout');
                      $('#loginInfo').text('Logged in as: '+txt);
                      
                    //$('#login').remove();
                    //$('#loginMenu').append('<a href="login.xhtml" id="login"> Logout</a>');
                 }
            }
        });
    },
    
    createTable:function(xml, action){
            
        $('div.content').text(' ');
        $('<table>').appendTo('div.content');
        $('<tr class="thdr"><td></td><td>Make</td><td>Model</td><td>Price</td><td></td><td></td></tr>')
        .appendTo('div.content');
        var index   = 0, btnEmptyCart;
        var carList = null, toFind = null;
        
        if(action ==='viewProducts'){
            carList = $(xml).find('carList');
            toFind = 'car';
        }else{
            carList = $(xml).find('shoppingCart');
            toFind = 'orderItem';
        }
        $(carList).find(toFind).each(
            function(){
                
                var id, make,mileage,model,price,year,imgpth;
                
                if(toFind === 'car'){  
                    id      = $(this).attr('id');
                    make    = $(this).find('make').text();
                    mileage = $(this).find('mileage').text();
                    model   = $(this).find('model').text();
                    price   = $(this).find('price').text();
                    year    = $(this).find('year').text();
                    imgpth  = $(this).find('imagePath').text();
                }
                else{
                    var car = $(this).find('car');
                    
                    id      = $(car).attr('id');
                    make    = $(car).find('make').text();
                    mileage = $(car).find('mileage').text();
                    model   = $(car).find('model').text();
                    price   = $(car).find('price').text();
                    year    = $(car).find('year').text();
                    imgpth  = $(car).find('imagePath').text();
                }
                var tr      = $('<tr></tr>');
                var td1     = $('<td></td>');
                var td2     = $('<td></td>'); 
                var td3     = $('<td></td>'); 
                var td4     = $('<td></td>');
                var td5     = $('<td></td>'); 
                var td6     = $('<td></td>');
                    
                var icon    = $('<img class="smallIcon"/>');
                $(icon).attr('src', imgpth);
                var btnInfo = $('<input type="button" value="INFO"/>');
                var btn     = $('<input type="button" value="Add To Cart"/>');
                
                if(action !== 'viewProducts'){
                    $(btn).attr('value', 'Remove');
                    btnEmptyCart = $('<input type="button" value="Empty Cart"/>');
                    if(action !== 'pay')
                        $(btnEmptyCart).click(shop.emptyCart);
                    else{
                        btnEmptyCart.attr('value', 'Pay');
                        ajax.post('fc?action=mail');
                    }
                }
                $(btn).attr('id', id);
                $(icon).click( 
                
                    function(){
                        var frame = $('<div class="imgFrame"></div>');
                        var closeBtn = $('<div class="closeBtn">Close</div>');
                        var imgBox = $('<div><img class="bigIcon"/></div>');
                        $(imgBox).find('img').attr('src', imgpth);
                        $(frame).append(closeBtn, imgBox);
                        $(closeBtn).click(
                            function(){
                                $(frame).remove();
                            }
                        );
                        $('div.content').prepend(frame);
                        
                    }
        
                );   
                $(btnInfo).click(
                       
                    function(){ 
                                                 
                        var dropdown  = $('<div class ="dropdown"><ul></ul></div>');
                        var li1       = $('<li>Make:    </li>');
                        var li2       = $('<li>Model:    </li>');
                        var li3       = $('<li>Price:    </li>');
                        var li4       = $('<li>Year:    </li>');
                        var li5       = $('<li>Mileage:    </li>');
                            
                        li1.append(make);
                        li2.append(model);
                        li3.append(price);
                        li4.append(year);
                        li5.append(mileage); 
                            
                        $(dropdown).append(li1, li2, li3, li4, li5);
                        $(td5).append(dropdown);
                            
                        setTimeout("shop.removeDropdown()", 3000);
                    }                      
                            
                    );
                        
                $(btn).click(function(){
                    if(action === 'viewProducts'){                
                        shop.addToCart($(this).attr('id'));
                      
                        $('div.content')
                        .prepend('<div class="dropdown"><b>Added 1 item to your cart</b></div>');
                        $('div.dropdown').css('height','25px');
                        setTimeout("shop.removeDropdown()", 2000);
                    }
                    else if(action === 'viewCart'){                
                        shop.removeFromCart($(this).attr('id'));
                    }
                });   
                    
                $(td1).html(icon);
                $(td2).html(make);
                $(td3).html(model);
                $(td4).html(price);
                if(action !== 'pay'){ //skip
                $(td5).html(btnInfo);
                $(td6).html(btn);
                }
                $(tr).append(td1, td2, td3, td4, td5, td6);                              
                $(tr).appendTo('div.content');
                if(index % 2 == 0){
                    $(tr).css('background', 'gray');
                    $(tr).css('color', 'white');
                }
                index++;
                    
            }
            );

        if(action === 'viewCart' || action ==='pay'){
            
            var tf    = $('<tr></tr>');
            var td_1  = $('<td><br/><b></b></td>'), 
            td_2  = $('<td></td>');
                
            $(td_1).find('b').text('Total: '+$(carList).find('total').text());
            $(td_2).html(btnEmptyCart);
            $(tf).append(td_1, td_2);
            $(tf).appendTo('div.content');
        }

        $('</table>').appendTo('div.content');
               
    }
    
    
        
}

